<template>
    <div class="container">
        <Header></Header>
        <div class="content">
            <img class="content_topImg" src="./images/background_top.png" alt="">
            <div class="group">
                <img src="./images/active_title6.png" alt="活动荣誉">
                <div class="text red border">
                    个人荣誉
                </div>
                <div class="text">
                    “韶華杯青少年美育系列活动”荣誉证书；<br>
                    “韶華杯青少年美育系列活动”社会实践荣誉证书；<br>
                    “韶華杯青少年美育系列活动”荣誉奖牌；<br>
                    “韶華杯青少年美育系列活动”荣誉奖奖杯；<br>
                    “韶華杯青少年美育系列活动”艺术人才档案证书。<br>
                </div>
                <div class="text red border margin">
                    组织单位及指导教师荣誉
                </div>
                <div class="text">
                    社会实践辅导员（证书）<br>
                    青少年社会实践单位（牌匾）<br>
                    青少年美育示范单位（牌匾）<br>
                </div>
                <div class="text red border margin">
                    作品出版和发表
                </div>
                <div class="text red">
                    01
                </div>
                <div class="text">
                    书画系列活动以及征文系列活动国赛特等奖以及部分一等奖获得者参选作品可由出版指导单位北京文学期刊中心《东方少年》杂志刊登，并获得《东方少年》系列杂志当期出版期刊和作品出版证书。
                </div>
                <div class="text red">
                    02
                </div>
                <div class="text">
                    省赛以及国赛优秀参赛学员作品可择优在各大艺术类期刊、媒体网络、活动组委会官方媒体推荐发表。
                </div>
            </div>
            <div class="margin"></div>
        </div>
    </div>
</template>
<script>
import Header from '@/components/Header/Header.vue';

export default {
    name: 'activeHonor',
    components: {
        Header
    },
    data() {
        return {

        };
    },
    methods: {

    }
}
</script>
<style scoped>
.content {
    width: 100%;
    text-align: center;
}

.content_topImg {
    width: 100%;
    margin-top: -1vw;
}

.text {
    font-size: 35px;
    letter-spacing: 10px;
    line-height: 60px;
}

.red {
    color: #BF272D;
}

.group {
    width: 80%;
    margin: 0 auto;
}

.group img {
    width: 18vw;
    margin-bottom: 2vw;
}

.group .topic_title {
    width: 35vw;
    margin: 1vw auto;
}

.border {
    width: 35vw;
    margin: 0 auto;
    border-bottom: 2px solid #BF272D;
    margin-bottom: 2vw;
}

.margin {
    margin-top: 5vw;
}

.footer {
    width: 100%;
    height: 10vw;
}

/* 横屏小分辨率 */
@media (min-width: 1401px) and (max-width: 2100px) {
    .text {
        font-size: 28px;
        letter-spacing: 8px;
        line-height: 50px;
    }
}

@media (min-width: 961px) and (max-width: 1400px) {
    .text {
        font-size: 20px;
        letter-spacing: 5px;
        line-height: 40px;
    }
}

/* 手机/小屏幕 */
@media (max-width: 960px) {
    .text {
        font-size: 15px;
        letter-spacing: 4px;
        line-height: 30px;
    }

    .group img {
        width: 35vw;
    }

    .group .topic_title {
        width: 50vw;
    }

    .border {
        width: 55vw;
    }

    .footer {
        height: 25vw;
    }
}
</style>